<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>jQueryArray</title>
<style type="text/css">
</style>
<script type="text/javascript">
	$(function(){
		
		
		/* ------------------------------------ */
		$("#add1").click(function(){
			var arr = ["This","is","China","Dream"];
			var value = $("#inp1").val();
			//增加到最后,并返回新数组长度。
			var length = arr.push(value);
			$("#sp1").html("数组值:arr=["+arr+"],数组长度:length="+length+";");
			//alert("数组值:arr=["+arr+"],数组长度:length="+length+";");
		});
		
		/* ------------------------------------ */
		$("#add2").click(function(){
			var arr = ["This","is","China","Dream"];
			var value = $("#inp1").val();
			var length = arr.unshift(value);
			$("#sp1").html("数组值:arr=["+arr+"],数组长度:length="+length+";");
			//alert("数组值:arr=["+arr+"],数组长度:length="+length+";");
		});
		
		/* ------------------------------------ */
		$("#add3").click(function(){
			var arr = ["This","is","China","Dream"];
			var value = $("#inp1").val();
			var index = $("#inp2").val();
			//输入的下标只能是纯数字
			 var reg = /^[0-9]+$/; 
			if(index==""){
				alert('请输入下标！');
			    return false;
			}
			if(!reg.test(index)){   
		        alert('下标只能输入数字！');
		        return false;
			}
			arr[index] = value;
			$("#sp1").html("数组值:arr=["+arr+"],数组长度:length="+length+";");
			//alert("数组值:arr=["+arr+"];");
		});
		
		$("#each11").click(function(){
			var arr1 = [{id:100,name:"张三疯"},{id:101,name:"李四光"}];
			$.each(arr1,function(index,value){
				alert("index="+index+",id="+value.id+",name="+value.name);
       		});
		});
		
		$("#each12").click(function(){
			var arr1 = [{id:100,name:"张三疯"},{id:101,name:"李四光"}];
			for(k in arr1){
				alert("index="+k+",id="+arr1[k].id+",name="+arr1[k].name);
			}
		});
		
		$("#each13").click(function(){
			var arr1 = [{id:100,name:"张三疯"},{id:101,name:"李四光"}];
			for(var k=0;k<arr1.length;k++){
				alert("index="+k+",id="+arr1[k].id+",name="+arr1[k].name);
			}
		});
		
		$("#del1").click(function(){
			var arr = ["The","Chinese","Dream","is","the","dream","of","every","Chinese","citizen"];
			delete arr[0];
			var length = arr.length;
			
			//删除的元素用undefined带替
			alert("index="+0+",value="+arr[0]);
			$("#sp3").html("数组值:arr=["+arr+"],数组长度:length="+length+";");
			//alert("数组值:arr=["+arr+"],数组长度:length="+length+";");
		});
		$("#del2").click(function(){
			var arr = ["The","Chinese","Dream","is","the","dream","of","every","Chinese","citizen"];
			arr.splice(0,1);

			alert("index="+0+",value="+arr[0]);
			var length = arr.length;
			$("#sp3").html("数组值:arr=["+arr+"],数组长度:length="+length+";");
		});
		
		$("#del3").click(function(){
			var arr = ["The","Chinese","Dream","is","the","dream","of","every","Chinese","citizen"];
			arr.splice(0,2,"China");
			var length = arr.length;
			$("#sp3").html("数组值:arr=["+arr+"],数组长度:length="+length+";");
			//alert("数组值:arr=["+arr+"],数组长度:length="+length+";");
		});
	});
</script>
</head>
<body>
	<div class="jQueryArray">
	<h3>jQuery 数组、集合的操作 - 添加、遍历、删除</h3>
		<div id="div01" style="height: 30px;width:900px;margin-left: 30px;">
			默认初始数组值为var arr = ["This","is","China","Dream"];数组长度length=4;
		</div>
		<div id="div1" style="height: 100px;width:900px;margin-left: 30px;">
			<label style="margin-left: 15px;">需要添加的数据：</label>
					<input id="inp1" class="easyui-textbox" style="width: 150px;height: 30px;">
			<label style="margin-left: 15px;">数据添加的下标：</label>
					<input id="inp2" class="easyui-textbox" style="width: 150px;height: 30px;">
				<br><br>
			<button  id="add1" class="easyui-linkbutton" style="width: 300px;" iconCls="icon-reload"><b style="color:red;">增加到数组的最后面,并返回新数组长度</b></button>
			<button  id="add2" class="easyui-linkbutton" style="width: 300px;" iconCls="icon-reload"><b style="color:red;">增加到数组的最前面,并返回新数组长度</b></button>
			<button  id="add3" class="easyui-linkbutton" style="width: 180px;" iconCls="icon-reload"><b style="color:red;">根据下标赋值</b></button>
			<br><br><label style="margin-left: 15px;">操作结果：</label><span id="sp1"></span>
		</div>
		<hr>
		<div id="div02" style="height: 30px;width:900px;margin-left: 30px;">
			默认初始数组值为var arr1 = [ {id:100,name:"张三疯"},{id:101,name:"李四光"}];
		</div>
		<div id="div2" style="height: 40px;width:900px;margin-left: 30px;">
			<button  id="each11" class="easyui-linkbutton" style="width: 180px;" iconCls="icon-reload"><b style="color:red;">$.each遍历</b></button>
			<button  id="each12" class="easyui-linkbutton" style="width: 180px;" iconCls="icon-reload"><b style="color:red;">增强for循环遍历</b></button>
			<button  id="each13" class="easyui-linkbutton" style="width: 180px;" iconCls="icon-reload"><b style="color:red;">for循环遍历</b></button>	
		</div>
		<hr>
		<div id="div03" style="height: 30px;width:900px;margin-left: 30px;">
			默认初始数组值为var arr = ["The","Chinese","Dream","is","the","dream","of","every","Chinese","citizen"];数组长度length=10;
		</div>
		<div id="div3" style="height: 40px;width:900px;margin-left: 30px;">
			<button  id="del1" class="easyui-linkbutton" style="width: 180px;" iconCls="icon-reload"><b style="color:red;">delete 删除</b></button>
			<button  id="del2" class="easyui-linkbutton" style="width: 180px;" iconCls="icon-reload"><b style="color:red;">splice 删除</b></button>
			<button  id="del3" class="easyui-linkbutton" style="width: 180px;" iconCls="icon-reload"><b style="color:red;">splice 替换</b></button>
			<br><br><label style="margin-left: 15px;">操作结果：</label><span id="sp3"></span>
		</div>
	</div>
</body>
</html>